<template>

	<div>
		<el-dialog :visible.sync="dialogVisible" width="580px" :before-close="handleClose"
			:close-on-click-modal="false">
			<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
			ref="banner-shopping-table"
				v-loading="loadingForm" tooltip-effect="dark">
				<el-table-column prop="goodsName" label="商品名称">
				</el-table-column>
				<el-table-column prop="" label="商品分组">
				</el-table-column>
				<el-table-column type="selection" width="55" align="center">
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer" v-if="!loadingForm">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import {
		listWcGoods
	} from "@/api/culturalCreativity/shopping.js";
	export default {
		data() {
			return {
				title: '',
				id: null,
				dialogVisible: false,
				loadingScreen: null,
				loadingForm: false,
				fileName: '',
				btnLoading: false,
				tableData: [],
				multipleSelection: []
			}
		},
		methods: {
			async init(ids) {
				try {
					this.dialogVisible = true;
					this.loadingForm = true;
					let res = await listWcGoods({},{
						pageNum: 1,
						pageSize: 99999,
					});
					this.tableData = res.rows;
					this.loadingForm = false;
					this.multipleSelection = ids.split(",");
					this.multipleSelection.forEach(i=>{
						this.tableData.forEach(o=>{
							if(o.goodsId == i){
								setTimeout(()=>{
									this.$refs['banner-shopping-table'].toggleRowSelection(o);
								},500);
							}
						})
					});
				} catch (e) {
					this.loadingForm = false;
					//TODO handle the exception
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map(item=>item.goodsId);
			},
			handleClose() {
				this.dialogVisible = false;
			},
			handleSubmit() {
				if(this.multipleSelection.length != 1){
					return this.$message.error("只能选择一个商品");
				};
				this.handleClose();
				this.$emit("success",this.multipleSelection);
			}
		},
		computed: {}
	}
</script>
<style lang="scss" scoped>
	.width100 {
		width: 590px;
	}

	.cell-input {
		width: 200px;
	}

	.up-file-wrappar {
		display: flex;
		align-items: center;
	}

	.total-day {
		display: inline-block;
		height: 36px;
		width: 40px;
		margin: 0 6px;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.up-file-name {
		display: inline-block;
		height: 36px;
		min-width: 555px;
		text-align: left;
		line-height: 36px;
		box-sizing: border-box;
		padding: 0 15px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		color: #606266;
		font-size: inherit;

		.text {
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 1; //行数
			-webkit-box-orient: vertical;
			max-width: 555px;
		}
	}
</style>
